<template>
  <div class="page4">
    <Header :isGoBack="false">
      <template v-slot:right>
        <div class="btn" @click="goStudyCenter">返回</div>
      </template>
    </Header>
    <!-- <Head-comp></Head-comp> -->
    <div class="ctx">
      <div class="ctx-top">
        <div class="img">
          <div class="img2" v-show="isGood">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c">
              <div class="c1"></div>
            </div>
          </div>
          <div class="img1" v-show="!isGood">
            <div class="a"></div>
            <div class="b"></div>
            <div class="c">
              <div class="c1"></div>
              <div class="c2"></div>
              <div class="c3"></div>
              <div class="c4"></div>
            </div>
          </div>
        </div>
        <div class="span">
          <div class="span-1">
            你的测试成绩为：<span :class="[isGood ? 'good' : 'bad']"
              >{{ obj.num }}个/{{ obj.time }}分钟</span
            >
          </div>
          <div v-show="isGood" class="span-2">
            哎呦，有点优秀哦。继续努力，超越自己！
          </div>
          <div v-show="!isGood" class="span-2">
            多多练习，你一定能够做的更好的！
          </div>
        </div>
      </div>
      <div class="ctx-btm">
        <div id="map1"></div>
      </div>
    </div>
  </div>
</template>
<script>
// import HeadComp from '../head/head'
import Header from "@/components/Header";
export default {
  data() {
    return {
      obj: {},
      isGood: true,
    };
  },
  created() {},
  mounted() {
    this.init(this.$route.query);
  },
  methods: {
    init(p) {
      let m =
        (new Date(p.endTime).getTime() - new Date(p.startTime).getTime()) /
        1000 /
        60;
      this.obj = {
        time: Math.round(m),
        num: p.wordNum,
      };
      let myEcharts = this.$echarts.init(document.querySelector("#map1"));
      let XData1 = [],
        YData1 = [], //反应时间
        YData2 = []; //错误次数
      p.value.forEach((e) => {
        console.log(
          Math.floor((e.value.time / e.value.count / 1000) * 100) / 100,
          e
        );
        XData1.push(e.key);
        YData1.push(
          Math.floor((e.value.time / e.value.count / 1000) * 100) / 100
        ); //秒
        YData2.push(e.value.count - e.value.trueCount); //次
      });

      let option = {
        title: {
          // text: 'xx',
          left: "center",
          // subtext: '纯属虚构'
        },
        // tooltip: {
        //     trigger: 'axis',
        //     formatter: '<div style="font-weight:800;border-bottom:1px solid rgba(0,0,0,.8)">{b}</div><br />{a0}: {c0}<br />{a1}: {c1}<br />{a2}: {c2}%',
        // },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          data: ["错误次数", "反应时间"],
          top: 10,
          icon: "rect",
          borderRadius: 5,
        },
        xAxis: {
          name: "",
          nameLocation: "end",
          nameTextStyle: {
            fontWeight: 800,
          },

          type: "category",
          boundaryGap: true,
          data: XData1,
        },
        yAxis: [
          {
            name: "错误（次）",
            type: "value",
            axisLine: {
              //坐标轴轴线相关设置。
              show: true,
            },
          },
          {
            name: "反应时间（m）",
            type: "value",

            axisLine: {
              //坐标轴轴线相关设置。
              show: true,
            },
            axisTick: {
              show: true,
            },
            axisLabel: {
              show: true,
            },
          },
        ],

        series: [
          {
            name: "错误次数",
            type: "bar",
            data: YData2,
            label: {
              show: true,
              position: "top",
              color: "#02ADFD",
            },
            barWidth: 20, //柱图宽度
            itemStyle: {
              normal: {
                color: "#02ADFD",
                // lineStyle:{
                //     width:1//设置线条粗细
                // }
              },
            },
            // yAxisIndex: 0
          },
          {
            name: "反应时间",
            type: "line",
            data: YData1,
            label: {
              show: true,
              position: "top",
              color: "#FF9611",
            },
            itemStyle: {
              normal: {
                color: "#FF9611",
                lineStyle: {
                  width: 3,
                },
              },
            },
            yAxisIndex: 1,
          },
        ],
      };
      myEcharts.setOption(option);
    },
    goStudyCenter() {
      this.$router.push({
        name: "keyboard1",
      });
    },
  },

  components: { Header },
};
</script>
<style lang="stylus" scoped>
@import './page4.styl';
</style>